<template>
   <div >
        <div
      v-if="this.tType === '1'"
      class="img-box"
      @click="triggerUpload('clipperFile')"
    >
      <input
        id="clipperFile"
        type="file"
        class="file-input"
        ref="file"
        accept="image/*"
        @change="change"
        v-show="false"
      />
      <img src="@/assets/upload.png" id="img" alt=""  />
     </div>
     <div
      v-if="this.tType === '2'"
      class="bg1-img-box"
      @click="triggerUpload('clipperFile')"
    >
       <div v-watermark="{text:'健康险广东分公司',textColor:'rgba(255, 255, 255, 0.5)'}">
           <input
        id="clipperFile"
        type="file"
        class="file-input"
        ref="file"
        accept="image/*"
        @change="change"
        v-show="false"
      />
     <img id="img" src="@/assets/uploadleft.png" alt="" />
       </div>
     
    </div>
   </div>
</template>

<script>
export default {
    props: {
    tType: String
  },
  data () {
    return {

    }
  },
  methods : {
      triggerUpload(id) {
      document.getElementById(id).click();
      //   this.$emit("upload");
    },
    change( event ) {
        let image = document.getElementById('img'); //预览对象
        this.clip(event , {
          resultObj : image,
          aspectRatio : 1
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    img{
        display: block;
        /* width: 120px; */
        /* height: 120px; */
    }
    h3{
        text-align: center;
    }
    h1, h2 {
      font-weight: normal;
    }

    ul {
      list-style-type: none;
      padding: 0;
    }

    li {
      display: inline-block;
      margin: 0 10px;
    }

    a {
      color: #42b983;
    }
</style>
